<template>
	<view>
		<view class="header">
			<view class="left">订单{{ statusList[order.status] || '' }}</view>
		</view>
		<view class="delivery" v-if="order.status != '0'">
			<view class="icon">
				<text class="cell-icon yticon icon-huoche" style="color: #ffffff"></text>
			</view>
			<view class="form" v-if="order.status == '1'">
				<input type="text" v-model="express1" placeholder="请填写物流单号" />
				<view class="btn" @click="submitExpress">提交</view>
			</view>
			<view class="info" v-else>
				<text>物流单号：{{ order.express1 }}</text>
			</view>
		</view>

		<view class="address">
			<view class="icon">
				<text class="cell-icon yticon icon-dizhi" style="color: #ffffff"></text>
			</view>
			<view class="info">
				<view class="name">
					{{ order.name }}
					<text class="mobile">{{ order.mobile }}</text>
				</view>
				<view class="text mt-8">{{ order.address }}</view>
			</view>
		</view>
		<view class="product">
			<view class="goods-box-single">
				<image class="goods-img" src="/static/icon/phone.png" mode="aspectFill"></image>
				<view class="right">
					<text class="title clamp">{{ order.g_name }} x 1</text>
					<text class="attr-box">{{ order.imel }}</text>
					<!-- <text class="price">{{ order.imel }}</text> -->
				</view>
			</view>

			<view class="problem">
				<view class="title">问题描述：</view>
				<view class="desc">{{ order.desc }}</view>
				<view class="title">问题照片：</view>
				<view class="imgs">
					<image v-for="(item, index) in images" :key="index" @click="previewImage(index)" :src="item" mode="aspectFill"></image>
				</view>
			</view>

			<view class="price">
				<view class="total">
					维修金额
					<text>￥{{ order.money }}</text>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="title">订单信息</view>
			<view class="box-e">
				创建时间：
				<text>{{ order.time }}</text>
			</view>
		</view>
		<view style="height: 10rpx">
			<!--兼容苹果系统下margin-bottom不生效-->
		</view>
		<!-- 		<view class="bottom" v-if="order.status == '0'">
			<button class="action-btn" @click.stop="button('cancel')">添加运单</button>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id: 0,
			status: '订单状态',
			order: {},
			statusList: {
				0: '待支付',
				1: '已支付',
				2: '维修中',
				3: '已完成'
			},
			express1: '',
			images: []
		};
	},
	onLoad(options) {
		this.order_id = options.order_id;
		this.detail(options.order_id);
	},
	methods: {
		previewImage(current) {
			// 使用 uni.previewImage 预览图片
			uni.previewImage({
				urls: this.images, // 图片列表数组
				current: this.images[current] // 当前显示图片的URL
			});
		},
		async submitExpress() {
			if (!this.express1) {
				return uni.showToast({
					title: '请填写运单单号！',
					icon: 'none'
				});
			}
			let data = await this.$api.request('/service/express', 'POST', {
				express: this.express1,
				id: this.order.id
			});
			uni.showToast({
				title: '运单单号提交成功！',
				icon: 'none'
			});
			this.detail();
		},
		async detail(order_id) {
			let data = await this.$api.request('/service/getordreinfobyid', 'POST', {
				id: order_id || this.order_id
			});
			uni.stopPullDownRefresh();
			if (data) {
				this.order = data;
				this.images = data.images.split(',');
				console.log(this.order);
			}
		},

		navTo(url) {
			this.$api.navTo(url);
		},

		pullDownRefresh() {
			this.detail(this.order_id);
		}
	},
	onPullDownRefresh() {
		this.pullDownRefresh();
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

.header {
	height: 130rpx;
	background: #1296db;

	.left {
		color: #ffffff;
		line-height: 100rpx;
		padding-left: 60rpx;
		padding-bottom: 30rpx;
		letter-spacing: 4rpx;
	}
}

.delivery {
	color: #545454;
	background: #ffffff;
	border-bottom: 1px solid #e9e9e9;
	display: flex;
	align-items: center;
	font-size: 32rpx;

	.icon {
		background: #00a7c8;
		height: 60rpx;
		width: 60rpx;
		border-radius: 100rpx;
		margin: 0rpx 30rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.info {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		width: 600rpx;
		vertical-align: middle;
		margin: 30rpx 0;
		position: relative;
	}
	.form {
		border: 4rpx solid $main-color;
		display: flex;
		margin: 30rpx 0;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		width: 600rpx;
		input {
			flex: 1;
		}
		view {
			color: $main-color;
			border-left: 2rpx solid $main-color;
			padding: 0 10rpx 0 30rpx;
			font-weight: 600;
		}
	}
}

.address {
	color: #545454;
	background: #ffffff;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	.icon {
		background: #ffac30;
		height: 60rpx;
		width: 60rpx;
		display: inline-block;
		border-radius: 100rpx;
		text-align: center;
		line-height: 60rpx;
		margin: 0rpx 30rpx 0 0;
	}

	.info {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		width: 600rpx;
		vertical-align: middle;
		margin: 30rpx 0;
		font-size: 32rpx;

		.mobile {
			color: #9b9b9b;
			margin-left: 30rpx;
		}
	}
}

.product {
	background: #ffffff;
	margin-top: 20rpx;
	padding: 30rpx;

	/* 单条商品 */
	.goods-box-single {
		display: flex;
		align-items: center;
		padding: 0 0 20upx 0;
		border-bottom: 1rpx solid #eaeaea;

		.goods-img {
			display: block;
			width: 80upx;
			height: 120upx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 30upx 0 24upx;
			overflow: hidden;
			position: relative;

			.title {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				line-height: 1;
			}

			.attr-box {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				padding: 10upx 0upx;
			}

			.price {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-top: 0;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 0upx;
				}
			}

			.action-btn {
				width: 160rpx;
				height: 60rpx;
				padding: 0;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #303133;
				background: #fff;
				border-radius: 100px;
				float: right;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.price {
		color: #9b9b9b;
		font-size: 30rpx;
		margin-top: 30rpx;

		text {
			float: right;
		}

		.total {
			text {
				font-size: 35rpx;
				color: #000;
				font-weight: 600;
			}
		}
	}

	.problem {
		padding: 20rpx 0 30rpx;
		border-bottom: 0.5px solid #eaeaea;
		.title {
			font-size: 30rpx;
		}
		.desc {
			background-color: #f5f5f5;
			font-size: 28rpx;
			padding: 20rpx;
			margin: 12rpx 0 20rpx;
			border-radius: 10rpx;
			color: #666;
		}
		.imgs {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			margin-top: 12rpx;
			image {
				width: 100%;
				height: 220rpx;
				border-radius: 12rpx;
			}
		}
	}
}

.order {
	background: #ffffff;
	margin-top: 20rpx;
	padding: 30rpx;

	.title {
		border-left: 8rpx solid $main-color;
		padding-left: 17rpx;
		color: #898989;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}

	font-size: 26rpx;
	color: #9b9b9b;
	line-height: 45rpx;
	margin-bottom: 120rpx;
}

.bottom {
	position: fixed;
	width: 100%;
	height: 100rpx;
	background: #ffffff;
	bottom: 0;
	border-top: 1px solid #e9e9e9;

	.action-btn {
		width: 160rpx;
		height: 60rpx;
		margin: 20rpx;
		padding: 0;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #303133;
		background: #fff;
		border-radius: 100px;
		float: right;

		&:after {
			border-radius: 100px;
		}

		&.recom {
			background: #fff9f9;
			color: $base-color;

			&:after {
				border-color: #f7bcc8;
			}
		}
	}
}
</style>